<#import "/spring.ftl" as spring />
<#import "../layout/defaultLayout.ftl" as layout>
<@layout.defaultLayout styles=["bootstrap-table/bootstrap-table.min.css",
"bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css"]
scripts=["bootstrap-table/bootstrap-table.min.js",
"bootstrap-table/locale/bootstrap-table-zh-CN.min.js",
"bootstrap-validator/validator.js",
"jquery/serializejson/jquery.serializejson.min.js",
"util/jquery-dateFormat.min.js",
"bootstrap-table/extensions/export/bootstrap-table-export.min.js",
"bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js",
"bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js",
"util/tableExport.js"]>

<div class="container-fluid">
        <div class="container">
        <fieldset>
				<legend>
					<span class="glyphicon glyphicon-th-list"></span>&nbsp;&nbsp;<@spring.message 'config.dataPreviewLegend' />
				</legend>
         	 	<table id="previewTable" data-classes="table table-hover table-striped" 
				           data-toolbar="#"
				           data-toggle="table"
				           data-show-columns="false"
				           data-show-export="false"
				           data-detail-view="false"
				           data-pagination="true"
				           data-page-list="[10]"
				           data-side-pagination="server"
				           data-content-type ="application/json"
				           data-data-type = "json"
				           data-query-params-type="limit"
				           data-method = "post"
				           data-query-params ="queryParams">
				           
				           <!-- data-query-params ="queryParams"
				           data-response-handler ="responseHandler"
				           data-method = "post"
				           data-ajax = "dataAjax"
				           data-url="/report/configure/preview/data" -->

				    </table>
				    <div style="text-align: right; width: 100%;">
						<button id="lastStep" class="btn btn-success" style="width: 100px;"><@spring.message 'report.lastStep' /></button>
						<button id="nextStep" class="btn btn-success" onclick="#" style="width: 100px;"><@spring.message 'report.nextStep' /></button>
					</div>
				</fieldset>
        </div>
        <br/><br/>
    <input type="text" name="reportId" id="reportId"  value="${reportId}" style="display:none;"/>   
</div>
<script>	
	var mtable = $('#previewTable');
	var obj = new Object();
	var reportIdStr = $('#reportId').val();
	var reportId = reportIdStr.replace(",","");
	function queryParams(params) {
		obj.offset = params.offset;
		obj.limit = params.limit;
		obj.reportId = reportId;
		return {'offset':params.offset,'limit':params.limit,'reportId':reportId};
	}
			
	$(function(){
		
		var options = mtable.bootstrapTable('getOptions');
		obj.offset = (options.pageNumber - 1) * options.pageSize;
		obj.limit = options.pageSize;
		obj.reportId = reportId;
		
		$.ajax({
	        url:'${request.contextPath}/report/configure/preview/data',
	        type:'POST',
	        contentType: 'application/json',
	        data:JSON.stringify(obj),
	        dataType:'json',
	        success:function(data){
	        	columns = [], datas = [];  
	        	if (data){
	    			var rowMap = data.rows[0];
	    			for (var key in rowMap){
	    				if (key != 'IDX'){
	    					columns.push({
		                        field: key,                   
		                        title: key,
		                        sortable: true
		                    });
	    				}
	    				
	    			}
	    			datas = data.rows;
	    		}
	        	mtable.bootstrapTable('refreshOptions',{
	        		columns:columns,
	        		url:'${request.contextPath}/report/configure/preview/data'
	        	});  
	        }
		});
		
		$("#lastStep").click(function(){
			window.history.back(-1);
		});
		
		$("#nextStep").click(function(){
			window.location.href = '${request.contextPath}/report/configure/colConf/'+reportId;
		});
		
		mtable.on('pre-body.bs.table', function (data) {
		    //alert("11111");
		});
		
	});

</script>
</@layout.defaultLayout>